vue-loader

What is vue-loader?

vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). It provides the ability to transform and load .vue files directly into webpack. It handles the parsing of .vue files, which can contain template, script, and style elements, and it applies other webpack loaders to the respective parts, such as babel-loader for the script section and css-loader for the style section.

What are vue-loader's main functionalities?

Parsing Single-File Components

vue-loader parses .vue files, extracting the script, template, and style sections. This code snippet shows how to configure webpack to use vue-loader for .vue files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Scoped CSS

vue-loader enables scoped CSS for Vue components, ensuring styles only apply to the current component. The code sample shows a scoped style block within a .vue file.

<style scoped>
p[data-v-f3f3eg9] {
  color: red;
}
</style>

Hot Module Replacement

vue-loader supports Hot Module Replacement (HMR) for Vue components, allowing components to be updated in real-time without a full page reload. The code sample demonstrates how to set up HMR for a Vue component.

if (module.hot) {
  module.hot.accept('./components/MyComponent.vue', function () {
    // Any required update logic...
  })
}

Pre-Processors

vue-loader allows the use of pre-processors like SCSS, LESS, and Stylus within the style section of a .vue file. The code sample shows how to use SCSS within a Vue component.

<style lang="scss">
$color: red;
.style-class {
  color: $color;
}
</style>

Asset URL Handling

vue-loader can transform asset URLs found in a Vue component's template into webpack module requests. The code sample demonstrates how to require an image asset in a .vue file's template.

<template>
  <img :src="require('./assets/logo.png')">
</template>

Other packages similar to vue-loader

react-hot-loader

react-hot-loader is similar to vue-loader in that it provides hot module replacement for React components. However, it is specific to React and does not handle single-file components like vue-loader does for Vue.

angular2-template-loader

angular2-template-loader is a loader for webpack that inlines HTML and CSS into Angular components. It is similar to vue-loader in that it processes component templates and styles, but it is designed for Angular rather than Vue.

svelte-loader

svelte-loader is a webpack loader for Svelte components, which are single-file components similar to Vue's SFCs. It compiles Svelte components into JavaScript modules, much like vue-loader does for Vue components.

README

Vue Loader

Vue.js component loader for Webpack.

The best way to get started is with vue-cli:

npm install -g @vue/cli
vue create hello
cd hello
npm run serve

This will setup a basic Webpack + vue-loader project for you, with *.vue files and hot-reloading working out of the box!

For advanced vue-loader configuration, checkout the documentation.